<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<tn-navbar>黑名单车辆</tn-navbar>
				<tn-input v-model="inputValue" placeholder="请输入车牌查询" @change="filterData">
          <template #suffix>
            <view class="tn-ml tn-mr" @click="filterData">
              <tn-icon name="search" color=" tn-gray_bg"></tn-icon>
            </view>
          </template>
        </tn-input>
				<tn-notice-bar :data="noticeData" bg-color="tn-orangeyellow-light" direction="vertical" text-color="tn-orange" left-icon="sound" left-icon-color="tn-orange" />
			</template>

			<view class="  tn-flex tn-flex-column ">
				<tn-swipe-action @select="deletePackage">
					<view class="  tn-flex tn-flex-column tn-shadow-md tn-radius  tn-m-sm  tn-gradient-bg__grey-light " v-for="(item, index) in dataList" :key="index">
						<tn-swipe-action-item :options="options">
							<view class="tn-gradient-bg__grey-light">
								<view class="tn-flex  tn-flex-column  tn-m-sm    ">
									<view class="tn-flex tn-align-center justify-between  ">
										<view class=" tn-text-lg">
											<tn-icon name="taxi-fill" color="tn-blue-dark" size="40" />
											<text class="tn-ml-xs">{{ item.numberPlate }}</text>
										</view>
										<view class="  "><text class="  tn-red_text tn-text-lg ">*备注：{{ item.remarks }}</text></view>
									</view>
									<view class="tn-flex tn-align-center justify-start tn-mt-sm">
										<text>起：{{ item.newStartTime }}&nbsp;&nbsp;</text>
										<text>止：{{ item.newEndTime }}</text>
									</view>
								</view>
							</view>
						</tn-swipe-action-item>
					</view>
				</tn-swipe-action>
			</view>

			<template #loadingMoreNoMore></template>
		</z-paging>

		<view>
			<!-- 悬浮按钮 -->
			<tn-suspend-button icon="add" size="sm" bg-color="tn-gradient-bg__cool-5" text-color="tn-white"  @click="openEditPopup"/>
			<!-- 添加黑名单弹框 -->
			 <tn-popup v-model="isPopupVisible" width="85%" open-direction="center" @close="closePopup"  close-btn :overlay-closeable="false">
			     <view class="tn-m-sm tn-p-sm">
			         <tn-form ref="formRef" :model="formData"   label-position="top">
			             <tn-form-item label="车牌号码">
			                 <tn-input v-model="formData.numberPlate" placeholder="多个车牌号用英文','逗号隔开"></tn-input>
			             </tn-form-item>

			            <tn-form-item label="备注">
			                <tn-input v-model="formData.remarks"></tn-input>
			            </tn-form-item>
			             <view class="tn-flex justify-between">
			              
			                 <tn-button @click="confirmEdit" size="lg" width="100%" bg-color="tn-blue">确认</tn-button>
			             </view>
			         </tn-form>
			     </view>
			 </tn-popup>
			
			</view>
	</view>
</template>

<script setup lang="ts">
import {onMounted, type Ref, ref} from "vue";
import { parseTime, timeFn } from "@/cfsheep/util";
import type { SwipeActionItemOption } from '@tuniao/tnui-vue3-uniapp'
import TnSuspendButton from 'tnuiv3p-tn-suspend-button/index.vue'
import {onLoad} from "@dcloudio/uni-app";
import CfCarParkUtil from "@/cfsheep/api/cfCarPark/park";
import dayjs from "dayjs";
const noticeData =ref(['左滑可操作删除按钮']);
// 右滑操作菜单配置
const options : SwipeActionItemOption = [
	{
		text: '删除',
		icon: 'delete',
		bgColor: 'tn-red',
	},
]
// 控制添加黑名单弹框
const isPopupVisible = ref(false);
const carParkId = ref(0);
const numberPlate = ref('');
// 表单参数
const formData = ref({
  numberPlate: '',
  carParkId: 0,
  startTime: dayjs().valueOf(),
  endTime: dayjs().add(10, 'year').valueOf(),
  status: 1,
  remarks: "",
  packageProductId: 0
});


const openEditPopup = () => {
    isPopupVisible.value = true;
};
const deletePackage = async (index: any) => {
  const _deleteResult = await CfCarParkUtil.deleteCarParkPackage({
    ids: dataList.value[index].id
  });
  if (_deleteResult.code == 10002) {
    queryList(1, 10);
  }
};

const closePopup = () => {
    isPopupVisible.value = false;
};
const confirmEdit = async () => {
  const _addResult = await CfCarParkUtil.addCarParkPackage(formData.value);
  if (_addResult.code == 10002) {
    closePopup();
    queryList(1, 10);
  }
};

const inputValue = ref("");
// 模拟数据
const tempList = ref([]);

const filterData = (_numberPlate : string) => {
  if (_numberPlate.length >= 4 || _numberPlate === '') {
    numberPlate.value = _numberPlate;
    queryList(1, 10);
  } else {
    dataList.value = [];
    paging.value.complete(dataList.value);
  }
};
// z-paging 示例
const paging = ref(null);
// 数据列表
const dataList: Ref<CfCarParkPackage[]> = ref();
//  套餐产品列表
const carParkPackageProductList: Ref<CfCarParkPackageProduct[]> = ref();
/**
 * 拉取黑名单列表
 * @param pageNo
 * @param pageSize
 */
const queryList = async (pageNo : number, pageSize : number) => {
  let params = {
    page: pageNo,
    size: pageSize,
    carParkId: carParkId.value,
    numberPlate: numberPlate.value,
    typeKey: 'blacklist_car'
  };
  if (numberPlate.value === '') {
    delete params.numberPlate;
  }
  const _dataList = await CfCarParkUtil.getCarParkPackageListByQuery(params);
  if (_dataList.code == 10002) {
    dataList.value = _dataList.data;
    for (const i of _dataList.data) {
      i.newStartTime = parseTime(i.startTime, null) || '-';
      i.newEndTime = parseTime(i.endTime, null) || '-';
    }
  } else {
    dataList.value = [];
  }
  paging.value.complete(dataList.value);
};
/**
 * 拉取套餐产品列表
 * @param pageNo
 * @param pageSize
 */
const getCarParkPackageProductList = async (pageNo : number, pageSize : number) => {
  let params = {
    page: 1,
    size: 100,
    carParkId: carParkId.value,
    typeKey: 'blacklist_car'
  };
  const _dataList = await CfCarParkUtil.getCarParkPackageProductListByQuery(params);
  if (_dataList.code == 10002) {
    carParkPackageProductList.value = _dataList.data;
    formData.value.packageProductId = carParkPackageProductList.value[0].id;
  } else {
    dataList.value = [];
  }
  paging.value.complete(dataList.value);
};
onMounted(() => { });
onLoad((params) => {
  if (params != undefined) {
    carParkId.value = params.id;
    formData.value.carParkId = carParkId;
    getCarParkPackageProductList();
  }
});
</script>

<style lang="scss" scoped>
.parking-name {
	flex: 1;
	/* 使停车场名称占据剩余空间 */
}
</style>
